<template>
    <div style="padding-top:2vh;height:100%;">
        <el-row class="row-bg" justify="space-evenly" style="height:100%;">
            <el-col :span="8" style="height:100%;">
                <dv-border-box10 style="height:100%;">
                    <div class="ranking-box" style="height:100%;display:flex;flex-direction:column;">
                        <div class="title1">
                            <span>各 学 院 挂 寝 率</span>
                            <dv-decoration3 style="width:15vw;padding-left:1vw;"
                                :color="['#0080FF', '#ffffff']" />
                        </div>
                        <dv-capsule-chart :config="config" style="width:100%;height:calc(100% - 4vh);" />
                    </div>
                </dv-border-box10>
            </el-col>
            <el-col :span="16" style="height:100%;">
                <dv-border-box4 style="height:100%;">
                    <dv-border-box4 :reverse="true" style="height:100%;">
                        <div class="ranking-box1" style="height:100%;">
                            <div class="title2">
                                <span>宿 舍 告 示 榜</span>
                            </div>
                            <p>
                                <strong>重要通知：</strong>
                                {{notice}}
                            </p>
                        </div>
                    </dv-border-box4>
                </dv-border-box4>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { inject, computed } from 'vue'
const wsState = inject('wsState')
const config = computed(() => ({
    data: wsState.ranking,
    unit: '%',
}))
const notice = computed(() => wsState.notice)
</script>
<style>
.ranking-box {
   padding-top: 1vw;
}
.title1 {
    display: flex;
    padding-top: 1vw;
    padding-left: 1vw;
    height: 6vh;
    span {
        font-size: 2vw;
    }
}
.ranking-box1 {
    width: 95%;
    padding-top: 3vh;
    padding-left:3vw;
}
</style>